<template>
	<view class="u-page">
		<view class="list">
			<block v-for="(item,index) in list" :key="index">
				<view class="orderDetail">
					<view class="line">
						<text>商品名称：{{item.goods.name}}</text>
					</view>
					<view class="line">
						<text>商品规格：{{item.spec.name}}</text>
					</view>
					<view class="line">
						<text>商品价格：￥{{item.price}}/{{item.spec.unit}}</text>
					</view>
					<view class="btn-group">
						<u-button size="small" type="primary" text="编辑" @click="edit(item.id,index)"></u-button>
						<view style="color: #fff;">空格</view>
						<u-button size="small" type="error" text="删除" @click="del(item.id,index)"></u-button>
					</view>
				</view>
			</block>	
			<view v-if="list.length==0">
				<u-empty text="没有设置商品!" mode="search" marginTop="150"></u-empty>
			</view>
			<view class="plusbtn" @click="goAdd">
				<u-icon name="plus" size="24" color="#fff"></u-icon>
			</view>
			<u-popup :show="showAdd" @close="showAdd=false" mode="center" :round="4" customStyle="width:80%;padding:20rpx 0;">
				<view style="padding: 100rpx 20rpx;">功能开发中，请使用电脑操作</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				customer_id:'',
				endData:false,
				page:1,
				list:[],
				showAdd:false
			}
		},
		onPullDownRefresh() {
			this.list=[];
			this.page=1;
			this.endData=false;
			this.pagelist(true);
		},
		onReachBottom() {
			this.pagelist();
		},
		onLoad(e) {
			this.customer_id=e.customer_id || '';
			this.pagelist();
		},
		methods: {
			...methods,
			del:function(id,index){
				this.$post('admin/customer/delgoods',{customer_id:this.customer_id,id:id},true,true).then(res=>{
					this.list.splice(index,1);
				});
			},
			edit:function(){
				this.showAdd=true;
			},
			goAdd:function(){
				this.showAdd=true;
			},
			pagelist:function(pulldown=false){
				if(this.endData){
					this.$msg('已经到底了');
					return;
				}
				this.$get("admin/customer/goodslist",{
					customer_id:this.customer_id,
					page:this.page
				},true).then(res=>{
					if(pulldown){
						uni.stopPullDownRefresh();
					}
					if(res.length<10){
						this.endData=true;
					}
					this.list=this.list.concat(res);	
					this.page++;	
				});		
			}
		}
	}
</script>

<style lang="scss">
.list{
	padding: 20rpx;
	font-size: 24rpx;
	.orderDetail{
		margin-bottom: 20rpx;
		border-radius: 6rpx;
		box-shadow: 0rpx 0rpx 20rpx #bebebe;
		padding: 0rpx 20rpx;
		padding-top: 2rpx;
		.top{
			display: flex;
			justify-content: space-between;
		}
		.line{
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}
		.btn-group{
			display: flex;
			justify-content: flex-end;
			width: 20%;
			margin-left: 80%;
			position: relative;
			top: -20rpx;
		}
	}
}
.plusbtn{
	position: fixed;
	bottom: 60rpx;
	right: 20rpx;
	background-color: #3f9ad7;
	border-radius: 50%;
	padding: 8rpx;
	z-index: 999;
}
</style>
